<template>
  <div>
    <w-add ref="WAdd" @reload="loadList" />
    <br />
    <a-table :columns="columns" :data-source="roles" row-key="_id" bordered>
      <template slot="page" slot-scope="_,item">
        <a-button size="small" type="link" @click="showPage(item)">查看</a-button>
      </template>
      <template slot="api" slot-scope="_,item">
        <a-button size="small" type="link" @click="showApi(item)">查看</a-button>
      </template>
      <template slot="action" slot-scope="_,item">
        <a-button
          type="link"
          size="small"
          style="margin-right: 5px"
          @click="modifyBtnClick(item)"
        >修改</a-button>
        <a-button type="link" size="small" @click="removeBtnClick(item)">删除</a-button>
      </template>
    </a-table>
    <w-page-pop ref="WPagePop" @reload="loadList" />
    <w-api-pop ref="WApiPop" @reload="loadList" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import WAdd from "@/components/admin/auth/role/add";
import WPagePop from "@/components/admin/auth/role/pagePop";
import WApiPop from "@/components/admin/auth/role/apiPop";
import { Admin } from "@/config/api";

@Component({
  name: "AdminAuthRole",
  layout: "admin",
  components: {
    WAdd,
    WPagePop,
    WApiPop,
  },
  async asyncData({ app }) {
    const { $wAxios } = app;
    const data = await $wAxios.$get(Admin.auth.role.all);
    return { roles: data };
  },
  head() {
    return {
      title: "角色管理",
    };
  },
})
export default class AdminWebPackageAdd extends Vue {
  roles: Array<any> = [];
  columns = [
    {
      title: "名称",
      dataIndex: 'name',
      key: "name",
      width: 200,
    },
    {
      title: "描述",
      dataIndex: 'describe',
      key: "describe",
    },
    {
      title: "访问页面",
      key: "page",
      width: 100,
      slot: "page",
      dataIndex: 'page',
      scopedSlots: { customRender: 'page' }
    },
    {
      title: "访问接口",
      key: "api",
      width: 100,
      slot: "api",
      dataIndex: 'api',
      scopedSlots: { customRender: 'api' }
    },
    {
      title: "操作",
      width: 150,
      align: "center",
      scopedSlots: { customRender: 'action' }
    },
  ];

  /**
   * 修改按钮点击
   */
  modifyBtnClick(row: any) {
    (this.$refs.WAdd as any).show(row);
  }

  /**
   * 加载列表数据
   */
  loadList() {
    this.$wAxios
      .$get(Admin.auth.role.all)
      .then((data) => {
        this.roles = data;
      })
      .catch(() => {});
  }

  /**
   * 删除按钮点击
   */
  removeBtnClick(row: any) {
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${Admin.auth.role.delete}${row._id}`);
    }, row.name).then(() => {
      this.loadList();
    });
  }

  showPage(row: any) {
    (this.$refs.WPagePop as any).show(row);
  }

  showApi(row: any) {
    (this.$refs.WApiPop as any).show(row);
  }
}
</script>

<style scoped></style>
